<!DOCTYPE html>
<html>
  <body style="font: 75% Lucida Grande, Trebuchet MS">
    <div id="content"></div>
    <p id="log" style="color: gray"></p>

    <script>
      document.getElementById('content').innerHTML = 
        '<h4>Simple to do list</h4>'+
        '<ul id="results"></ul><div>You can also see the database at Developer > Developer Tools > Storage</div>'+
        '<button onclick="newRecord()">new record</button>'+
        '<button onclick="createTable()">create table</button>' +
        '<button onclick="dropTable()">drop table</button>'+
        '<button onclick="borrarTodo()">borrar tablas</button>'+
        '<input type="text" id="base" onkeyup="elimina()"></input>';
        
      
      var db;
      var numBase=1 
      document.getElementById("base").value=numBase;
      
      var log = document.getElementById('log');
      db = openDatabase("DBTest", "1.0", "HTML5 Database API example", 200000);
      showRecords();
      document.getElementById('results').addEventListener('click', function(e) { e.preventDefault(); }, false);
      
      function onError(tx, error) {
        log.innerHTML += '<p>' + error.message + '</p>';
      }
      
      // select all records and display them
      function showRecords() {
        document.getElementById('results').innerHTML = '';
        db.transaction(function(tx) {
          tx.executeSql("SELECT * FROM Table"+numBase+"Test", [], function(tx, result) {
            for (var i = 0, item = null; i < result.rows.length; i++) {
              item = result.rows.item(i);
              document.getElementById('results').innerHTML += 
                  '<li><span contenteditable="true" onkeyup="updateRecord('+item['id']+', this)">'+
                  item['text'] + '</span> <a href="#" onclick="deleteRecord('+item['id']+')">x</a></li>';
            }
          });
        });
      }

      function createTable() {
        db.transaction(function(tx) {
          tx.executeSql("CREATE TABLE Table"+numBase+"Test (id REAL UNIQUE, text TEXT)", [],
              function(tx) { log.innerHTML = "Table"+numBase+"Test created" },
              onError);
        });
        
      }
      
      // add record with random values
      function newRecord() {
        var num = Math.round(Math.random() * 10000); // random data
        db.transaction(function(tx) {
          tx.executeSql("INSERT INTO Table"+numBase+"Test (id, text) VALUES (?, ?)", [num, 'Modify text...'],
              function(tx, result) {
                log.innerHTML = 'record added';
                showRecords();
              }, 
              onError);
        });
      }
      
      function updateRecord(id, textEl) {
        db.transaction(function(tx) {
          tx.executeSql("UPDATE Table"+numBase+"Test SET text = ? WHERE id = ?", [textEl.innerHTML, id], null, onError);
        });
      }
      
      function deleteRecord(id) {
        db.transaction(function(tx) {
          tx.executeSql("DELETE FROM Table"+numBase+"Test WHERE id=?", [id],
              function(tx, result) { showRecords() }, 
              onError);
        });
      }
     
      function elimina(){
    	  numBase=document.getElementById("base").value;
    	  alert("este es el num de bd a borrar: "+numBase);
      }
      // delete table from db
      function dropTable() {
        db.transaction(function(tx) {
          
          tx.executeSql("DROP TABLE Table"+numBase+"Test", [],
              function(tx) { showRecords() }, 
              onError);
        });
      }
      function borrarTodo(){
    	  
			db.transaction(function(tx) {
				for (var i=0; i<50;i++){   
				alert(i);
    	          tx.executeSql("DROP TABLE IF EXISTS Table"+i+"Test", [],
    	        	function(tx) { showRecords() }, onError);
				}
			});
    	  
      }
    </script>
	
  </body>
</html>